<template>
  <div class="home">
    <el-row class="row-class">
      <p class="title" style="margin-left:10px;"><i></i>近三十天营收统计</p>
      <PanelGroup></PanelGroup>
    </el-row>
    <div class="white-box">
      <el-row class="row-class" style="border-bottom:2px solid #F2F2F2;padding-bottom:20px;">
        <p class="title"><i></i>系统通知</p>
        <Notice></Notice>
      </el-row>
      <el-row class="row-class">
        <p class="title" style="margin-top:10px;"><i></i>会员生日提醒({{dateFormat(new Date(),'YYYY-MM-DD')}})</p>
        <NoticeBirthday></NoticeBirthday>
      </el-row>
    </div>
    <el-row class="mod-home">
      <img src="~@/assets/img/home_flow.jpeg" />
    </el-row>
  </div>
</template>

<script>
import PanelGroup from "./data/PanelGroup";
import Notice from './notice/notice'
import NoticeBirthday from './notice/notice-birthday'

export default {
  components: {
    PanelGroup,Notice,NoticeBirthday
  }
};
</script>

<style scoped lang="scss">
.home {
  padding: 32px;
  background-color: #f0f2f5;
  position: relative;

  .white-box{
    background:#fff;
    border-radius:10px;
    padding:15px;
  }
  .row-class {
    margin-bottom: 10px; 

    .title{
      color:#48494D;
      font-size:20px;
      margin-top:0;

      i{
        border:4px solid #17B3A3;
        display:inline-block;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        vertical-align: -1px;
        margin-right: 8px;
      }
    }
  }
}
.mod-home {
  display: -webkit-flex;
  justify-content: center;

  img {
    width: 100%;
    margin-top: 20px;
    border-radius: 10px;
  }
}
</style>
